<template>
   <a-modal v-model="visible"
    :maskClosable="false"
    :footer="null"
    :closable="false"
    @ok="handleOk"
    dialogClass="notice_work_dialog"
   >
        <div class="notice_work_header" slot="title">
            <div class="header_title">
                <a-button v-if="noticeRoute === 'workflowInstance'" type="primary" @click="saveForm" size="small">保存表单</a-button>
            </div>
            <div class="header_bts">
                <div v-if="noticeRoute === 'workflowApprove'">
                    <div v-if="approved === null&&is_user">
                        <a-button  type="primary" @click="() => handleUpdateTask(true)" size="small">通过</a-button>
                        <a-button type="danger" @click="() => handleUpdateTask(false)" size="small">否决</a-button>
                    </div>
                    <div v-if="approved === true">
                        <span style="color: #4caf50">已通过</span>
                    </div>
                    <div v-if="approved === false">
                        <span style="color: #ee0000">已被否决</span>
                    </div>
                </div>
                
                <a-icon class="close" type="close" @click="$emit('cancel')"/>
            </div>
        </div>
        <div class="notice_work_body">
            <div class="body_detail" v-if="is_flow">
                <div class="body_detail_form">
                    <div>
                        <v-form-render :form-json="formJson" :form-data="formData" :option-data="optionData" ref="vFormRef"></v-form-render>
                    </div>
                </div>
            </div>
            <div v-else class="body_detail">
                <el-empty description="记录不存在"></el-empty>
            </div>
            <div class="body_work" style="max-height:618px;overflow: scroll;">
                <div v-if="task_history.length!=0">
                    <div style="font-size:16px;margin-top:20px;margin-left:20px;font-weight:600">流程</div>
                    <el-divider></el-divider>
                    <div style="min-height:300px;margin:20px;">
                        <el-steps direction="vertical" :active="ac_state" space="150px" finish-status="success">
                            <el-step :title="item.name" v-for="(item,index) in task_history" :key="index"></el-step>
                        </el-steps>
                        <div class="flow1">
                            <div class="flow1_left">
                                <span class="start_user"><a-icon type="user" style="color: white"/></span>
                            </div>
                            <div class="flow1_right">
                                <div>{{task_history[0].user}}</div>
                                <div>于 {{task_history[0].time}} 发起流程</div>
                                <div>{{task_history[0].name}}</div>
                            </div>
                        </div>
                        <div class="flow2" v-for="(flow,index) in task" :key="index" :style="'top: '+(270+index*150)+'px;'">
                            <div class="item_msg" v-if="flow.stepType=='SEND_NOTICE'" v-html="flow.data.msg"></div>
                            <div class="flow2_user" v-for="(item,index) in flow.data.result" :key="index">
                                <div class="flow2_left">
                                    <span class="start_user"><a-icon type="user" style="color: white"/></span>
                                </div>
                                <div class="flow2_right">
                                    <!-- <div style="margin-top: 25px;color: blue;font-size: 16px;">等你审核...</div> -->
                                    <div>{{item.user}}</div>
                                    <div v-if="flow.stepType=='APPROVE'">
                                        <span v-if="item.approved==true" style="color:green">已同意</span>
                                        <span v-else-if="item.approved==false" style="color:red">已否决</span>
                                        <span v-else style="color:#E6A23C">待审批</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </a-modal>
</template>

<script>
import { getFormData } from "@/api/vForm.js"
import { updateRow, getRow  } from "@/api/worksheet.js"
import { getTaskDetail, updateWorkflowTask, getTaskHistory } from "@/api/app.js"
import {getUserInfo} from '@/api/user'
export default {
    props:{
        visible: Boolean,
        worksheetId: String,
        rowId: String,
        noticeRoute: String,
        taskId: String,
        state: Number
    },
    data(){
        return {
            tableName: '',
            formJson: {},
            formData: {},
            optionData: {},
            approved: null,
            task_history: [],
            is_flow: true,
            is_user: false
        }
    },
    async mounted(){
        if(this.noticeRoute === 'workflowInstance'){
            let [autoNodeId, autoInstanceId] = this.taskId.split('&')
            autoNodeId = autoNodeId.replace('nodeId=', '')
            autoInstanceId = autoInstanceId.replace('autoInstanceId=', '')
            let result = await getFormData({id: this.worksheetId})
            let formData = await getRow({worksheetId: this.worksheetId, rowId: this.rowId})
            try{
                let history = await getTaskHistory(autoNodeId, autoInstanceId)
                this.task_history = history
            }
            catch(err){
                console.log(err)
            }
            if(result){
                this.tableName = result.name
                if('config' in result){
                    let config = JSON.parse(result.config);
                    this.$refs.vFormRef.setFormJson(config)
                    this.$refs.vFormRef.setFormData(formData)
                }
            }
        } 
        else if (this.noticeRoute === 'workflowApprove'){
            let detail = await getTaskDetail(this.taskId)
            let {approveObject:{row: {worksheetId} , rowId}, approveUserId, approved } = detail
            let result = await getFormData({id: worksheetId})
            try{
                var formData = await getRow({worksheetId, rowId})
            }catch(err){
                this.is_flow = false
                return
            }
            if(detail.autoNodeId&&detail.autoInstanceId){
                try{
                    let history = await getTaskHistory(detail.autoNodeId, detail.autoInstanceId)
                    this.task_history = history
                }catch(err) {
                    console.log(err)
                }
            }
            let user = await getUserInfo()
            if(approveUserId == user.data.data.userId){
                this.is_user = true
            }
            this.approved = approved
            if(result){
                this.tableName = result.name
                if('config' in result){
                    let config = JSON.parse(result.config);
                    this.$refs.vFormRef.setFormJson(config)
                    this.$refs.vFormRef.setFormData(formData)
                }
            }
        }
    },
    methods:{
        async saveForm(){
            let formData = await this.$refs.vFormRef.getFormData();
            let result = await updateRow({worksheetId: this.worksheetId, data: formData, rowId: this.rowId})
            if(result){
                this.$message.success('修改成功！');
            } else {
                this.$message.error('修改失败！');
            }
        },
        async handleUpdateTask(approved){
            this.approved = approved
            let result = await updateWorkflowTask({
                id: this.taskId, 
                approved
            })
            if(result){
                this.$message.success('修改成功！');
                this.$emit("success_back")
            } else {
                this.$message.error('修改失败！');
            }
        },
    },
    computed:{
        ac_state() {
            for(let index in this.task_history){
                if(this.task_history[index].isCurrent){
                    return parseInt(index)
                }
            }
            return this.task_history.length
        },
        // async is_user() {
        //     let u_json = await getUserInfo()
        //     console.log(u_json)
        //     this.$nextTick(() => {
        //         console.log(this.approveUserId)
        //     })
            
        //     // let user_obj = JSON.parse(u_json)
        //     // for(let item in this.task_history){
        //     //     if(this.task_history[item].stepType==="APPROVE"&&this.task_history[item].isCurrent){
        //     //         for(let us of this.task_history[item].data.result){
        //     //             if(us.user == user_obj.Username){
        //     //                 return true
        //     //             }
        //     //         }
        //     //     }
        //     // }
        //     return false
        // },
        task() {
            return this.task_history.slice(1)
        }
    }
}
</script>

<style lang="less">
.notice_work_dialog{
    min-width: 900px;
    max-width: 1600px;
    width: 95% !important;
    top: 3%;
    height: 96%;
    .ant-modal-content{
        height: 100%;
        display: flex;
        flex-direction: column;

        .ant-modal-header{
            padding: 0 20px;

            .notice_work_header{
                height: 50px;
                display: flex;
                align-items: center;
                justify-content: space-between;

                .header_bts{
                    display: flex;
                    align-items: center;

                    .close{
                        color: #999;
                        margin-left: 20px;
                    }
                }
            }

        }

        .ant-modal-body{
            padding: 0;
            flex: 1 1 auto;

            .notice_work_body{
                height: 100%;
                display: flex;

                .body_detail{
                    flex: 1 1 auto;
                    position: relative;
                    
                    .body_detail_form{
                        height: 100%;
                        width: 100%;
                        padding: 10px 20px;
                        position: absolute;
                        top: 0;
                        bottom: 0;
                        overflow: hidden;
                        overflow-y: auto;
                    }
                }
                .body_work{
                    width: 450px;
                    position: relative;
                    background: #fafafa;
                    border-left: 1px solid #ddd;

                    .flow1{
                        position: absolute;
                        top: 130px;
                        right: 50px;
                        width: 320px;
                        height: 100px;
                        background-color: white;
                        border-radius: 5px;
                        box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
                        display: flex;
                        justify-content: space-between;

                        .flow1_left{
                            flex: 1;
                            padding-left: 20px;
                            padding-top: 20px;

                            .start_user{
                                padding: 5px;
                                padding-left: 7px;
                                padding-right: 7px;
                                border-radius: 30px;
                                font-size: 22px;
                                background-color: skyblue;
                            }
                        }
                        .flow1_right{
                            flex: 5;
                            padding-top: 10px;

                            div{
                                margin-top: 5px;
                                font-size: 13px;
                                color: gray;
                            }
                            
                            div:nth-child(1){
                                font-size: 16px;
                                color: black;
                            }
                        }
                    }

                    .flow2{
                        position: absolute;
                        top: 270px;
                        right: 50px;
                        width: 320px;
                        max-height: 110px;
                        background-color: white;
                        border-radius: 5px;
                        box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
                        overflow: scroll;

                        .item_msg{
                            padding-left: 15px;
                            padding-top: 5px;
                        }

                        .flow2_user{
                            display: flex;
                            justify-content: space-between;
                            height: 50px;

                            .flow2_left{
                                flex: 1;
                                padding-left: 20px;
                                padding-top: 15px;
                                
                                .start_user{
                                    padding: 5px;
                                    padding-left: 7px;
                                    padding-right: 7px;
                                    border-radius: 30px;
                                    font-size: 22px;
                                    background-color: skyblue;
                                }
                            }
                            .flow2_right{
                                flex: 5;
                                padding-top: 13px;

                                div{
                                    display: inline;
                                    margin-top: 5px;
                                    font-size: 13px;
                                    color: gray;
                                }
                                div:nth-child(1){
                                    color: black;
                                    font-size: 16px;
                                }
                                div:nth-child(2){
                                    margin-left: 10px;
                                    font-size: 13px;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>